<template>
  <a-modal
    v-model:visible="shareModal"
    unmount-on-close
    :width="450"
    ok-text="复制全部"
    :on-before-ok="copyLinkAll"
    @cancel="handleCancel"
  >
    <template #title> 分享 </template>
    <div class="content">
      <a-descriptions :data="shareLinkInfo" bordered :column="1">
        <template #value="row">
          {{ row.value }}

          <icon-copy class="icon-copy" @click="copyLink(row.value)"
        /></template>
      </a-descriptions>
      <!-- </a-form> -->
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import useFileManageStore from '@/store/modules/file-manage/index';
  import { storeToRefs } from 'pinia';
  import { Message } from '@arco-design/web-vue';
  import { ref, reactive } from 'vue';

  interface shareFormInter {
    shareTo: string; // 标题
    receivers: string; // 收件人
    fileList: Array<object>;
    message: string; // 消息
  }
  const shareForm = reactive<shareFormInter>({
    shareTo: 'authorized', // 标题
    receivers: '', // 收件人
    fileList: [],
    message: '', // 消息
  });

  const route = useRoute();
  const projectId = ref(route.params.projectId);
  const store = useFileManageStore();
  const { shareModal, shareLinkInfo } = storeToRefs(store);
  const linkInfo = [
    {
      label: 'GIS',
      value: 'htt1ps://lanhuapp.com/',
    },
    {
      label: 'Shared',
      value: 'ht2tps://lanhuapp.com/',
    },
  ];

  async function copyLink(value: string) {
    try {
      await navigator.clipboard.writeText(value);
      Message.success('复制成功');
    } catch (e) {
      Message.error('复制失败');
      console.log(`复制链接失败: ${e}`);
    }
  }
  async function copyLinkAll() {
    const value = shareLinkInfo.value.map((item) => item.value).join('  ');
    try {
      await navigator.clipboard.writeText(value);
      Message.success('复制成功');
    } catch (e) {
      Message.error('复制失败');
      console.log(`复制链接失败: ${e}`);
    }
  }
  const handleCancel = () => {
    store.setShareModal(false, []);
  };
</script>

<style scoped lang="less">
  .text-font {
    display: inline-block;
    font-size: 16px;
    margin-left: 8px;
  }
  .file-count {
    position: absolute;
    top: 20px;
    right: 0;
  }
  .share-to {
    margin: 10px;
  }
  .copy-all {
    position: absolute;
    top: 6px;
    right: -15px;
  }
  .icon-copy {
    position: relative;
    left: 115px;
    cursor: pointer;
  }
</style>
